<template>
  <div id="app">
    <div v-if="show">
      <Top v-if="showTop" />
      <Head v-if="showHead" />
    </div>
    <Nav v-if="showNav" />
    <keep-alive><MiniNav v-if="minishow" /></keep-alive>
    <keep-alive><router-view v-if="$route.meta.keepAlive" /></keep-alive>
    <router-view v-if="!$route.meta.keepAlive" :key="$route.query.t" />
    <launch-product v-if="showLaunchProduct" />
    <Footer v-if="showFooter" />
    <Menu v-if="showMenu" />
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
import Top from 'components/common/Top';
import Head from 'components/common/Head';
import Nav from 'components/common/Nav';
import LaunchProduct from 'components/common/LaunchProduct';
import Footer from 'components/common/Footer';
import Menu from 'components/common/Menu';
import MiniNav from './components/common/MiniNav';

export default {
  name: 'App',
  components: {
    MiniNav,
    Top,
    Head,
    Nav,
    LaunchProduct,
    Footer,
    Menu
  },
  data() {
    return {
      show: true,
      showTop: true,
      showHead: true,
      showNav: true,
      showLaunchProduct: true,
      showFooter: true,
      showMenu: true,
      minishow: false
    };
  },
  created() {
    this.checkLogin();
  },
  mounted() {
    window.addEventListener('scroll', this.windowScroll);
  },
  methods: {
    ...mapMutations(['checkLogin','logout']),
    windowScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop >= 400) {
        if (this.$route.name !== 'CompanyHomeHome') {
          this.minishow = true;
        }
      } else {
        this.minishow = false;
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.windowScroll);
  },
  watch: {
    $route(route) {
      if (route.meta.hide) {
        this.showHead = false;
        this.showNav = false;
        this.showLaunchProduct = false;
        this.showMenu = false;
      } else if (route.meta.companyHome) {
        this.showHead = false;
        this.showNav = false;
      } else {
        this.showTop = true;
        this.showHead = true;
        this.showNav = true;
        this.showLaunchProduct = true;
        this.showFooter = true;
        this.showMenu = true;
      }
    }
  }
};
</script>

<style>
@import url('./assets/style/normalize.css');
@import url('./assets/style/base.css');

.mouse-cover-canvas {
  width: 380px;
  height: 380px;
  top: 580px !important;
  left: 850px !important;
}
</style>
